<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>

<body>
<div class="container-fluid">
    <div id="menu-list">

    </div>

</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="static/bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(function () {
        var html1 = '';
        $.ajax({
            url: "${request.contextPath }/menu/getMenuTree",
            data: null,
            type: "POST",
            dataType: "json",
            async:false,
            success: function (data) {
                var html = '';
                if(data.result.length > 0){

                    var result = data.result;

                    for (var i=0; i < result.length; i++){
                        var menu = result[i];
                        html = html + '<div href="#dashboard-menu-' + menu.id + '" class="nav-header" data-toggle="collapse"><i class="icon-dashboard"></i>' + menu.name + '</div>'
                                        + '<div id="dashboard-menu-' + menu.id + '" class="item-b nav nav-list collapse in">';

                        html = getParentArry(html, menu.childMenuList);

                        html = html + '</div>'
                                + '</div>';
                    }
                    $('#menu-list').append(html);
                }
            },
            failure: function (data) {
            }
        });
    })
    
    function getParentArry(html, childMenuList) {
        for (var i = 0; i < childMenuList.length; i++){
            var menu = childMenuList[i];
            if(null != menu.childMenuList){
                html = html + '<div href="#dashboard-menu-' + menu.id + '" class="nav-header" data-toggle="collapse"><i class="icon-dashboard"></i>' + menu.name + '</div>'
                    + '<div id="dashboard-menu-' + menu.id + '" class="item-b nav nav-list collapse in">';
                html = getParentArry(html, menu.childMenuList);
                html = html + '</div>'
                    + '</div>';
            }else {
                html = html + '<div>'
                                + menu.name
                            + '</div>';
            }
        }
        return html;
    }

    // function myCollapsible(id) {
    //     $("#dashboard-menu-" + id).on('hide.bs.collapse', function () {
    //         // do something…
    //         console.info("do something…");
    //         console.info(id);
    //     });
    // }
</script>
</body>

</html>
